<template>
  <div>
    <div class="buttons">
      <el-input placeholder="结算单编号" style="width:220px"
                v-model="balanceCode"></el-input>
      <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="起始时间">
      </el-date-picker>
      <el-date-picker
        v-model="endTime"
        type="date"
        placeholder="结束时间">
      </el-date-picker>
      <el-button type="primary" @click="getBalance">查询</el-button>
      <el-button type="primary" @click="clear">清空</el-button>
    </div>
    <VTable
      v-if="tableData.code!==405"
      :tableData="tableData.data"
      :tableHeader="tableHeader"
      :tableHandle="tableHandle"
      :tableHandle1="tableHandle1"
      :tableHandle2="tableHandle2"
      :tableSort="tableSort"
      v-loading="listLoading">
    </VTable>
    <div class="page-wrap" v-if="tableData.data">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="tableData.data.size"
        layout="total, prev, pager, next, jumper"
        :total="tableData.data.total">
      </el-pagination>
    </div>
    <VForm :title="title" v-if="dialogVisible" moduleName="fun">
      <template v-if="dialogModle==='logger'">
        <Logger :balanceId="balanceId"></Logger>
      </template>
      <template v-if="dialogModle==='fun'">
        <Fun :ruleForm="ruleForm" :getTableData="getTableData"></Fun>
      </template>
      <template v-if="dialogModle==='border'">
        <Border :balId="balId"></Border>
      </template>
    </VForm>
  </div>
</template>
<script>
  import VTable from '../../components/VTable.vue'
  import VForm from '../../components/VForm'
  import Fun from './Fun.vue'
  import Logger from '../../view/balance/LoggerList.vue'
  import Border from './BorderList'
  var moment = require('moment')
  var format = require('../../util/util')
  import {mapState, mapGetters} from 'vuex'
  import * as types from '../../store/mutations-type'
  export default {
    data () {
      return {
        balanceCode: '',
        currentPage: 1,
        limit: 20,
        listLoading: false,
        balanceId: '',
        balId: '',
        dialogModle: '',
        ruleForm: {
          balanceReamrk: '',
          balanceId: '',
          preStatus: 2,
          postStatus: 3
        },
        tableHandle: [
          {
            text: '财务审核', event: this.createForm
          }],
        tableHandle1: [
          {
            text: '日志', event: (...params) => this.show(...params)
          }],
        tableHandle2: [
          {
            text: '订单详情', event: (...params) => this.showly(...params)
          }],
        tableHeader: [
          {prop: 'balanceCode', label: ' 结算单编号', width: 140},
          {prop: 'busName', label: '商家名称', width: 140},
          {prop: 'mobile', label: '商家电话', width: 130},
          {prop: 'acceptBank', label: '开户行'},
          {prop: 'acceptorName', label: '持卡人'},
          {prop: 'acceptAccount', label: '卡号', width: 140},
          {prop: 'settlementAmount', label: '应结金额(元)'},
          {prop: 'realSettlementAmount', label: '实际转账金额(元)'},
          {prop: 'settlementRemark', label: '转账备注'},
          {prop: 'colAuditTime', label: '审核时间', width: 180, formatter: this.formatterColAuditTime},
          {prop: 'transferTime', label: '转账时间', width: 180, formatter: this.formatterTransferTime},
          {prop: 'balanceStatus', width: 115, label: '结算单状态', formatter: this.formatterBalance},
          {prop: 'balanceReamrk', label: '结算单备注'}
        ],
        startTime: '',
        endTime: ''
      }
    },
    components: {
      VTable,
      VForm,
      Fun,
      Logger,
      Border
    },
    methods: {
      createForm (index, obj) {
        this.dialogModle = 'fun'
        this.ruleForm.balanceId = obj.id
        this.$store.dispatch(types.FUN_SHOW_FORM)
        this.title = '财务审核'
      },
      show (index, obj) {
        this.dialogModle = 'logger'
        this.balanceId = obj.id
        this.$store.dispatch(types.FUN_SHOW_FORM)
        this.title = ''
      },
      showly (index, obj) {
        this.dialogModle = 'border'
        this.balId = obj.id
        this.$store.dispatch(types.FUN_SHOW_FORM)
        this.title = ''
      },
      /**
       * 时间格式化
       * @param row
       * @returns {string}
       */
      formatterTransferTime (row) {
        if (row.transferTime) {
          return moment(new Date(row.transferTime)).format('YYYY-MM-DD hh:mm:ss')
        }
      },
      formatterColAuditTime (row) {
        if (row.colAuditTime) {
          return moment(new Date(row.colAuditTime)).format('YYYY-MM-DD hh:mm:ss')
        }
      },
      /**
       * 订单状态转义
       * @param row
       * @returns {string}
       */
      formatterBalance (row) {
        return row.balanceStatus === 1 ? '待业务审核' : row.balanceStatus === 2 ? '待财务审核' : row.balanceStatus === 3 ? '审核通过' : row.balanceStatus === 4 ? '已结算' : row.balanceStatus === 5 ? '废除结算单' : '未知'
      },
      /**
       * 每页条数
       * @param val
       */
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
      },
      /**
       * 翻页
       * @param val
       */
      handleCurrentChange (val) {
        this.currentPage = val
        this.getBalance()
      },
      /**
       * 表单初始化
       */
      initFormData () {
        for (var i in this.ruleForm) {
          this.ruleForm[i] = ''
        }
      },
      getTableData () {
        this.$store.dispatch(types.FUN_REQ_LIST, '?pageIndex=' + this.currentPage + '&pageSize=' + this.limit + '')
      },
      /**
       * 列表排序
       * @param column
       * @param prop
       * @param order
       */
      tableSort (column, prop, order) {
      },
      /**
       * 根据id查询数据
       */
      getBalance () {
        if (!this.startTime) {
          this.startTime = ''
        } else {
          this.startTime = moment(new Date(this.startTime)).format('YYYY-MM-DD')
        }
        if (!this.endTime) {
          this.endTime = ''
        } else {
          this.endTime = moment(new Date(this.endTime)).format('YYYY-MM-DD')
        }
        let para = {
          pageIndex: this.currentPage,
          pageSize: this.limit,
          balanceCode: this.balanceCode,
          startTime: this.startTime,
          endTime: this.endTime
        }
        if (!this.balanceCode) {
          delete para.balanceCode
        }
        if (!this.startTime) {
          delete para.startTime
        }
        if (!this.endTime) {
          delete para.endTime
        }
        para = format.formatString(para)
        this.$store.dispatch(types.FUN_REQ_LIST, '?' + para)
      },
      clear () {
        this.balanceCode = ''
        this.startTime = ''
        this.endTime = ''
        this.getTableData()
      }
    },
    updated () {
      if (this.tableData.code === 405) {
        this.$message.error({
          title: '错误',
          message: this.tableData.message
        })
      }
    },
    computed: {
      ...mapState({
        dialogVisible: state => state.fun.dialogVisible,
        checkNum: state => state.fun.checkNum
      }),
      ...mapGetters({
        tableData: 'fun_tableData'
      })
    },
    mounted () {
      this.getTableData()
    }
  }
</script>
